﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产出计算</title>
  <link rel="stylesheet" href="./index.css" />
  <link rel="icon" type="image/x-icon" href="./assets/img/favicon.ico" />
  <script src="./lib/decimal.10.4.3.min.js"></script>
  <script src="./index.js"></script>
</head>

<body>

  <div id="OAL-check-dialog" class="dialog">
    <div class="mask"></div>
    <div class="dialog-body">
      <div class="tab-title">总长值每班次检查</div>
      <div class="main">
        <div class="top sp">
          <span>总长值</span>
          <span id="ea_show_ck" class="OAL_txt"></span>
        </div>

        <div class="btm sp">
          <div class="cfm_btn mybtn" onclick="eaConfirmOnClickHandler()">总长值确认</div>
          <div class="chg_btn mybtn" onclick="goSetEAOnClickHandler()">前往修改值</div>
        </div>
      </div>
    </div>
  </div>

  <div id="num-keyboard-dialog" class="dialog">
    <div class="dialog-body" id="slider" style="position: relative;">
      <div class="main">
        <div class="top">

          <div style="display: flex; justify-content: flex-start; align-items: center;margin-bottom: 5px;">
            <div class="tab">最小值:</div>
            <input id="" class="txt"
              style="padding-left: 5px;box-sizing: border-box;height: 32px; line-height: 32px; width: 140px; margin-right: 10px;"
              type="text" min="" value="0" readonly />
          </div>
          <div style="display: flex; justify-content: flex-start; align-items: center;margin-bottom: 5px;">
            <div class="tab">最大值:</div>
            <input id="" class="txt"
              style="padding-left: 5px;box-sizing: border-box;height: 32px; line-height: 32px; width: 140px; margin-right: 10px;"
              type="text" min="" value="5000" readonly />
          </div>
          <div style="display: flex; justify-content: flex-start; align-items: center;margin-bottom: 5px;">
            <div class="tab" onclick="fastSetupVal()">上次值:</div>
            <input id="scz" class="txt"
              style="padding-left: 5px;box-sizing: border-box;height: 32px; line-height: 32px; width: 140px; margin-right: 10px;"
              type="text" min="" value="0" readonly />
          </div>
          <div style="display: flex; justify-content: flex-start; align-items: center;">
            <div class="tab">当前值:</div>
            <div style="height: 32px;width: 140px;position: relative;">
              <input id="num-ipt" class="txt"
                style="padding-left: 5px;box-sizing: border-box;height: 32px; line-height: 32px; width: 140px; margin-right: 10px;"
                type="text" min="" value="" oninput="onbdInput()" />
              <p style="display: none; height: 16px;line-height: 16px;font-size:12px;width: 140px; position: absolute; top: 34px; left: 0;margin: 0;color:#c05b74"
                id="bd-ipt-err-tip">
              </p>
            </div>
            <span class="clr" onclick="onIptClrClick()">X</span>
          </div>

        </div>

        <div class="btm" style="margin-top: 22px;" onclick="onKeyAreaClick(event)">
          <div class="key" data-key="7" id="key-7">7</div>
          <div class="key" data-key="8" id="key-8">8</div>
          <div class="key" data-key="9" id="key-9">9</div>
          <div class="key" data-key="4" id="key-4">4</div>
          <div class="key" data-key="5" id="key-5">5</div>
          <div class="key" data-key="6" id="key-6">6</div>
          <div class="key" data-key="1" id="key-1">1</div>
          <div class="key" data-key="2" id="key-2">2</div>
          <div class="key" data-key="3" id="key-3">3</div>
          <div class="key" data-key="-" id="key--">-</div>
          <div class="key" data-key="0" id="key-0">0</div>
          <div class="key" data-key="." id="key-.">.</div>
          <div class="key" data-key="←" id="key-←">←</div>
          <div class="key" data-key="X" id="key-X">X</div>
          <div class="key" data-key="Enter" id="key-Enter">Enter</div>
        </div>
      </div>
    </div>
  </div>


  <div id="setting-dialog" class="dialog">
    <div class="mask" onclick="dialogMaskOnClick()"></div>
    <div class="dialog-body">
      <div class="tab-title">设置</div>
      <!--<div class="op_tip">单击切换当前EA值；双击删除EA值</div>-->
      <div class="EA_list" id="EA_list">
        <!--
        <div class="EA mybtn" id="set-EA-12.345" onclick="setEADoOnClick(12.345)">
          <span>12.345</span>
          <div class="del_btn">×</div>
        </div>
        -->
      </div>

      <div class="addEAForm">
        <input placeholder="新增总长值..." id="add_EA" style="width: 90px; margin-right: 10px;" type="text" value="" />
        <button onclick="addEAOnClick()">添加并修改</button>
        <div class="tip" style="width: 100%; height: 20px;"><span id="tip_info" class="info"></span></div>
      </div>
      <div class="optEAForm">
        <span style="color: wheat;">最小EA数：</span>
        <input id="EA_min" style="width: 45px; color: blueviolet; font-size: 18px; margin-right: 10px;" type="text"
          value="41" />
        <span style="color: wheat;">最大EA数：</span>
        <input id="EA_max" style="width: 45px;  color: blueviolet; font-size: 18px; margin-right: 10px;" type="text"
          value="220" />
        <button onclick="optEAOnClick()">修改</button>
        <div class="tip" style="width: 100%; height: 20px;"><span id="tip_info" class="info"></span></div>
      </div>
    </div>

  </div>


  <div id="root">

    <div class="op_tips">
      <div style=""><span style="color: yellow;">操作说明：</span></div>
      <div style="text-align: center;font-size: 14px;"><span>单击选择</span></div>
      <div style="text-align: center;font-size: 14px;"><span>双击取消</span></div>
      <div style="text-align: center;font-size: 14px;"><span>使用清空按钮快速清空</span></div>
      <div style="margin-top: 5px; margin-bottom: 5px;text-align: center;">
        <span style="display:inline-block; width: 80px; height: 25px;line-height: 25px;" class="clearing_btn mybtn"
          onclick="onClearingClick()"> 清空 </span>
      </div>
    </div>


    <div id="top-wrapper"
      style="position: fixed;background-color: #cac1c1;width: 100%;top: 0;left:0;padding: 20px;box-sizing: border-box;border-radius: 4px;z-index:666;">

      <div id="version-tag">v1.7.0</div>
      
      <div class="top sp">
        <div class="left" style="height: 100%;">
          <span>总长值</span>
          <!-- <select id="ea_sel" class="EA_txt">
        </select> -->
          <span id="ea_show" class="EA_txt"></span>
        </div>
        <div class="right">
          <div style="display:inline-block;vertical-align: middle;" class="setting_btn mybtn"
            onclick="openSettingDialog()"></div>
          <span id="ea_cg_tip" class="EA_cg_tip"></span>
        </div>
      </div>

      <div class="juan-wrapper">
        <div class="left">
          <div class="sp" style="margin-bottom: 10px;">
            <span style="color: whitesmoke;">卷</span><span class="order_ one"
              style="display: inline-block;">1</span><span style="color: whitesmoke;">产出 : </span> <input id="J1_EA"
              style="width: 60px; margin-right: 10px;" type="text" min="0" value="" readonly />
            <span style="margin-right: 10px;color: rgba(242, 79, 3, 1); font-size: 12px;">EA</span>
            <!-- 实际值 -->
            <input class="value_1_txt" id="J1_act" style="width: 75px; margin-right: 10px;" type="text" value=""
              readonly />
            <!-- 四舍五入值 -->
            <input class="value_txt" style="width: 60px; margin-right: 10px;" type="text" id="J1_res" value=""
              readonly />
          </div>
          <div class="sp" style="margin-bottom: 20px;">
            <span style="color: whitesmoke;">卷</span><span class="order_ two"
              style="display: inline-block;">2</span><span style="color: whitesmoke;">产出 : </span> <input id="J2_EA"
              style="width: 60px; margin-right: 10px;" type="text" min="" value="" readonly />
            <span style="margin-right: 10px;color: rgba(242, 79, 3, 1); font-size: 12px;">EA</span>
            <!-- 实际值 -->
            <input class="value_1_txt" id="J2_act" style="width: 75px; margin-right: 10px;" type="text" value=""
              readonly />
            <!-- 四舍五入值 -->
            <input class="value_txt" style="width: 60px; margin-right: 10px;" type="text" value="" id="J2_res"
              readonly />
          </div>
        </div>

        <div class="right">
          <div class="sp" style="margin-bottom: 20px;">
            <span style="color: whitesmoke;">卷</span><span class="order_ thr"
              style="display: inline-block;">3</span><span style="color: whitesmoke;">产出 : </span> <input id="J3_EA"
              style="width: 60px; margin-right: 10px;" type="text" min="" value="" readonly />
            <span style="margin-right: 10px;color: rgba(242, 79, 3, 1); font-size: 12px;">EA</span>
            <!-- 实际值 -->
            <input class="value_1_txt" id="J3_act" style="width: 75px; margin-right: 10px;" type="text" value=""
              readonly />
            <!-- 四舍五入值 -->
            <input class="value_txt" style="width: 60px; margin-right: 10px;" type="text" value="" id="J3_res"
              readonly />
          </div>
          <div class="sp" style="margin-bottom: 20px;">
            <span style="color: whitesmoke;">卷</span><span class="order_ four"
              style="display: inline-block;">4</span><span style="color: whitesmoke;">产出 : </span> <input id="J4_EA"
              style="width: 60px; margin-right: 10px;" type="text" min="" value="" readonly />
            <span style="margin-right: 10px;color: rgba(242, 79, 3, 1); font-size: 12px;">EA</span>
            <!-- 实际值 -->
            <input class="value_1_txt" id="J4_act" style="width: 75px; margin-right: 10px;" type="text" value=""
              readonly />
            <!-- 四舍五入值 -->
            <input class="value_txt" style="width: 60px; margin-right: 10px;" type="text" value="" id="J4_res"
              readonly />
          </div>
        </div>
      </div>


      <div style="justify-content: space-between; display: flex;">
        <div class="sp">
          <!-- <span>总投入数</span> <input type="text" id="touru" min="0" value="" readonly /> -->
          <span style="display: inline-block; width: 80px;font-weight: 600; color: darkred;">平均产出 : </span>
          <input class="pjgs_txt" style="width: 450px; margin-left: 10px; margin-right: 10px;" type="text" readonly
            id="pjgs" value="" />
          <span style="font-weight: 600; color: darkred;margin-right: 10px;">=</span>
          <input class="value_txt" style="width: 90px; margin-right: 10px;" type="text" readonly id="pjcc" value="" />
          <!-- <span>报废 : </span> <input class="value_txt" style="width: 60px; margin-right: 10px;" type="text" id="bf" value="" readonly /> -->
        </div>
        <span class="clearing_btn mybtn" onclick="onClearingClick()"> 清空 </span>
      </div>
      <div class="sp" style="margin-top: 10px;">
        <!-- <span>总投入数</span> <input type="text" id="touru" min="0" value="" readonly /> -->
        <span style="display: inline-block; width: 80px;font-weight: 600; color: darkred;">不良 : </span>
        <div style="display:flex;width: 458px; margin-left: 10px; margin-right: 10px;">
          <input style="color: darkred;font-weight: 600;font-size: 16px;" class="blgs_txt" type="text" readonly id="trs"
            placeholder="请输入投入数..." value="" onclick="openNumKeyboard()" />
          <span style="color: #2e18ad;font-weight: 600;font-size: 16px;">&nbsp;-&nbsp;</span>
          <input style="color: #2e18ad;font-weight: 600;font-size: 16px;" class="blgs_txt" type="text" readonly id="cc"
            value="" />
        </div>
        <span style="font-weight: 600; color: darkred;margin-right: 10px;">=</span>
        <input class="value_txt" style="width: 90px; margin-right: 10px;" type="text" readonly id="bl" value="" />
        <!-- <span>报废 : </span> <input class="value_txt" style="width: 60px; margin-right: 10px;" type="text" id="bf" value="" readonly /> -->
      </div>

    </div>

    <div
      style="height: calc(100% - 195px);margin-top:215px;border-radius: 4px;box-sizing:border-box;border: 2px solid #321231; padding: 5px; overflow-y:scroll;">

      <div class="num_list" style="width: 100%; min-height: 600px;">



        <div class="left" style="opacity: 0;">
        </div>

        <div class="middle">
          <div class="nums-container" id="nums-container">

            <!-- 测试用 -->
            <!-- <div class="nums selected" onclick="numClickHandler(12,32)">
              <div>
                <span style="font-size: 16px;">66</span>
                <span style="color: rgba(242, 79, 3, 1); font-size: 12px; margin-left: 5px;">EA</span>
              </div>
              <div>
                <span style="color: #1a35ab; font-size: 14px; font-weight: 400;">1800</span>
              </div>
              <div class="order lt">1</div>
              <div class="order rt">2</div>
              <div class="order lb">3</div>
              <div class="order tb">4</div>
            </div> -->

          </div>
        </div>

        <div class="right">

        </div>



      </div>
    </div>


  </div>


</body>

</html>